import { reactive } from "vue";

(() => {
    const data = {
        name: 'yuyang',
        age: 25,
        info: {
            city: 'jms'
        }
    }
    // const data = [1,2,3,4]
    function reactive(data) {
        if(data === null  || typeof data !== 'object') {
            return data;
        }
        return new Proxy(data, {
            get (target, key, receiver){
                if(Reflect.ownKeys(target).includes(key)) {
                    console.log('get', key);
                }
                const result = Reflect.get(target, key, receiver);
                console.log(result);
                // 深度监听
                return  reactive(result)
            },
            set(target, key, val, receiver) {

                if(Reflect.ownKeys(target).includes(key)) {
                    console.log(`已有的key`,key)
                }else {
                    console.log(`新增的key`, key);
                }
                const result = Reflect.set(target, key,val, receiver);
                console.log('set', key, val);
                return  result
            },
            deleteProperty(target, key) {
                const result = Reflect.deleteProperty(target, key);
                console.log(result);
                console.log('deleteProperty', key);
                return  result
            }
        })
    }


    window.proxyData = reactive(data)

}
) ()